<template>
  <el-container style="min-height: 100vh;">
    <el-aside :width="sidewidth+'px'" style="background-color: rgb(238, 241, 246); height: 100%;">
      <!--        左边框-->
      <UAside :isCollapse="isCollapse"></UAside>
    </el-aside>

    <el-container>
      <el-header style="border-bottom:1px solid #ccc;">
        <UHeader :collapse="collapse" :collapseBtnClass="collapseBtnClass" :switchRouter="switchRouter"></UHeader>
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>

import UAside from "@/components/views/UAside.vue";
import UHeader from "@/components/views/UHeader.vue";

export default {
  components: {UHeader, UAside},
  data() {
    return {
      collapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sidewidth: 200,
      picturewidth: 5,
    }
  },
  //菜单栏控制面包屑
  computed:{
    switchRouter(){
      // console.log(this.$route.matched)
      return this.$route.matched
    }
  },
  methods: {
    collapse() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {  //收缩
        this.sidewidth = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
      } else {  //展开
        this.sidewidth = 200
        this.collapseBtnClass = 'el-icon-s-fold'
      }
    }
  },

};
</script>


<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.headerBg {
  background: #ccc !important;
}

</style>